<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
  <title>Ao - Elegant Microsoft To-Do desktop app</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
  <meta name="description" content="Elegant Microsoft To-Do desktop app">
  <meta name="author" content="Klaus Sinani">
  <meta name="robots" content="index,follow">
  <meta name="googlebot" content="index,follow">
  <script src="https://use.fontawesome.com/e95f01a005.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
	<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
	<!-- Facebook Open Graph! -->
	<meta property="og:url" content="https://klaussinani.github.io/ao">
	<meta property="og:type" content="website">
	<meta property="og:title" content="Ao">
	<meta property="og:image" content="https://cdn.rawgit.com/klaussinani/ao/125924ed/media/dark-theme.png">
	<meta property="og:description" content="Elegant Microsoft To-Do desktop app">
	<meta property="og:site_name" content="Ao">
	<meta property="og:locale" content="en_US">
	<!-- Twitter Cards! -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:creator" content="@klaussinani">
	<meta name="twitter:url" content="https://klaussinani.github.io/ao/">
	<meta name="twitter:title" content="Ao">
	<meta name="twitter:description" content="Elegant Microsoft To-Do desktop app">
	<meta name="twitter:image" content="https://cdn.rawgit.com/klaussinani/ao/125924ed/media/dark-theme.png">
	<!-- Google+ / Schema.org -->
	<meta itemprop="name" content="Ao">
	<meta itemprop="description" content="Elegant Microsoft To-Do desktop app">
	<meta itemprop="image" content="https://cdn.rawgit.com/klaussinani/ao/125924ed/media/dark-theme.png">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-status-bar-style" content="#FFFFFF">
	<meta name="apple-mobile-web-app-title" content="Ao">
	<!-- App Icons!  -->
	<link rel="icon" sizes="192x192" href="highres-icon.png">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<meta name="theme-color" content="#FFFFFF">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="application-name" content="Ao">
	<meta name="msapplication-tooltip" content="Elegant Microsoft To-Do desktop app">
	<meta name="msapplication-navbutton-color" content="#FFFFFF">
	<meta name="msapplication-window" content="width=800;height=600">
	<meta name="msapplication-TileColor" content="#FFFFFF">
	<meta name="msapplication-task-separator" content="1">
  <style>
    ::-webkit-scrollbar {
      width: 10px !important;
    }

    ::-webkit-scrollbar-track {
      border-radius: 0px !important;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 0px !important;
      background: #212121 !important;
    }

    html {
      font-family: 'Raleway', sans-serif;
    }

    hr {
      width: 30%;
      color: #212121 !important;
    }

    h1, h2, h3, h4, h5, h6 {
      color: #212121 !important;
    }

    .logo {
      padding-top: 30px !important;
    }

    .black-bg {
      background-color: #000000;
    }

    .white-text {
      color: #FFFFFF;
    }

    .card .card-image img {
      background-color: #000000;
      display: block;
      border-radius: 0px !important;
      position: relative;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .dark-grey {
      background-color: #212121 !important;
    }

    .text-link {
      color: #212121;
      text-decoration: none;
      border-bottom: 1px black dotted;
    }

    .text-link:hover {
      border-bottom: 1px #212121 solid;
    }

    .img-meta {
      display: block;
      margin: auto;
      padding-top: 0px;
    }

    .btn-spacing {
      margin: 3px;
    }

    .pad-bot {
      padding-bottom: 35px;
    }

    .star-btn {
      color: black;
      border: 1px solid black;
      background-color: white;
    }

    .star-btn:hover {
      background-color: #2cb4e3 !important;
    }

    .beat {
      -webkit-animation: heartbeat 2000ms infinite;
      -moz-animation: heartbeat 2000ms infinite;
      -ms-animation: heartbeat 2000ms infinite;
      -o-animation: heartbeat 2000ms infinite;
      animation: heartbeat 2000ms infinite;
    }

    @-webkit-keyframes heartbeat {
      0%,
      40%,
      60%,
      80% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
      0%,
      40%,
      60%,
      80% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25)
      }
    }

    @-moz-keyframes heartbeat {
      0%,
      40%,
      60%,
      80% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
      50%,
      70% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25)
      }
    }

    @-ms-keyframes heartbeat {
      -webkit-transform: scale(1);
      transform: scale(1)
    }

    50%,
    70% {
      -webkit-transform: scale(1.25);
      transform: scale(1.25)
    }

    -webkit-transform: scale(1);
    @-o-keyframes heartbeat {
      0%,
      40%,
      60%,
      80% {
        transform: scale(1)
      }

      50%,
      70% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25)
      }
    }

    @keyframes heartbeat {
      0%,
      40%,
      60%,
      80% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }

      50%,
      70% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25)
      }
    }
  </style>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-107285587-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'UA-107285587-1');
  </script>
</head>

<body>
  <div class="section">
    <div class="container center">
      <img class="logo" src="media/logo.png" width="17%">
      <h3 class="header center">Ao</h3>
      <div class="row center">
        <h5 class="col s12 light">Elegant Microsoft To-Do desktop app</h5>
      </div>
      <img class="img-meta" src="media/list-navigation.gif" width="100%">
      <div class="row center">
        <h6 class="col s12 light"><span id="gh-latest"></h6>
      </div>
      <div class="row center">
        <a href="https://github.com/klaussinani/ao/releases/latest" class="btn-large waves-effect waves-light btn-spacing dark-grey"><i class="fa fa-download left"></i>Download</a>
        <a href="https://github.com/klaussinani/ao" class="btn-large waves-effect waves-light btn-spacing dark-grey"><i class="fa fa-code-fork left"></i>Fork Source</a>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="container">
      <br/>
      <br/>
      <br/>
      <h4 class="header center">What's inside?</h4>
      <hr/>
      <br/>
      <br/>
      <h4 class="header center">Keyboard shortcuts</h4>
      <div class="row center">
        <h5 class="col s12 light">Toggle anything in a flash.</h5>
        <a class="text-link" href="https://github.com/klaussinani/ao#keyboard-shortcuts">View all.</a>
      </div>
      <img class="img-meta" src="media/header.png" width="100%">
    </div>
  </div>
  <div class="section">
    <div class="container">
      <h4 class="header center">Sepia Theme</h4>
      <div class="row center">
        <h5 class="col s12 light">Perfect for glossy screens.</h5>
      </div>
      <img class="img-meta" src="media/sepia-theme.png" width="100%">
    </div>
  </div>
  <div class="section">
    <div class="container">
      <h4 class="header center">Black Theme</h4>
      <div class="row center">
        <h5 class="col s12 light">Deep focus materialized.</h5>
      </div>
      <img class="img-meta" src="media/black-theme.png" width="100%">
    </div>
  </div>
  <div class="section">
    <div class="container">
      <h4 class="header center">Dark Theme</h4>
      <div class="row center">
        <h5 class="col s12 light">Silky & relaxing.</h5>
      </div>
      <img class="img-meta" src="media/dark-theme.png" width="100%">
    </div>
  </div>
  <div class="section">
    <div class="container">
      <h4 class="header center">Compact Mode</h4>
      <div class="row center">
        <h5 class="col s12 light">Keep your productivity to the maximum no matter the screen size.</h5>
      </div>
      <img class="img-meta" src="media/compact-mode.png" alt="Ao Compact Mode" width="70%">
    </div>
  </div>
  <div class="section">
    <div class="container">
      <h4 class="header center">List Navigation</h4>
      <div class="row center">
        <h5 class="col s12 light">Navigate seamlessly without taking your hands away from the keyboard.</h5>
      </div>
      <img class="img-meta" src="media/list-navigation.gif" alt="Note Navigation" width="100%">
    </div>
  </div>
</div>
<div class="section">
  <div class="container">
    <h4 class="header center">Custom Shortcut Keys</h4>
    <div class="row center">
      <h5 class="col s12 light">Adjust Ao to your workflow by modifying any shortcut key to your own preference.</h5>
    </div>
    <img class="img-meta" src="media/custom-shortcut-keys.gif" width="100%">
  </div>
</div>
<div class="section">
    <div class="container">
      <h4 class="header center">Scalable Interface</h4>
      <div class="row center">
        <h5 class="col s12 light">Adjust the zooming factor to your own preference.</h5>
      </div>
      <img class="img-meta" src="media/scalable-interface.gif" width="100%">
    </div>
  </div>
  <div class="section">
    <div class="container">
      <h4 class="header center">Cross Platform, Update Notifications & more</h4>
      <div class="row center">
        <h5 class="col s12">View all the features in detail on <a href="https://github.com/klaussinani/ao" class="text-link">Github.</a></h5>
      </div>
      <br/>
    </div>
  </div>
  <footer class="pad-bot">
    <div class="container ">
      <div class="row center">
        <h6 class="col s12 light"><i class="fa fa-code fa-lg"></i> with <i class="fa fa-heart fa-lg beat"></i> by
          <a href="https://github.com/klaussinani" class="text-link">@klaussinani</a>
        </h6>
        <h6 class="col s12 light">Ao is an unofficial, open source, third-party, community driven, free app and is not affiliated in any way with Microsoft.</h6>
      </div>
    </div>
  </footer
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
  var xmlhttp = new XMLHttpRequest();
  var repoMetaURL = "https://api.github.com/repos/klaussinani/ao/commits/master";
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var repoMeta = JSON.parse(this.responseText);

      var commitURL = repoMeta.html_url;
      var authorURL = repoMeta.author.html_url;
      var commitMessage = repoMeta.commit.message;
      var authorName = repoMeta.commit.author.name;
      var commitDate = new Date(repoMeta.commit.author.date).toDateString();

      var ghLatestActivity = 'Latest commit on Github: "' + '<a class="text-link" href="' + commitURL + '"' + '>' + commitMessage + '</a>' + '" by ' + '<a class="text-link" href="' + authorURL + '"' + '>' + authorName + '</a>' + ' on ' + commitDate + '.';

      document.getElementById("gh-latest").innerHTML = ghLatestActivity;
    }
  };
  xmlhttp.open("GET", repoMetaURL, true);
  xmlhttp.send();
</script>
</body>

</html>
